/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-08-08 10:01:04
 * @filename : components/photoPublic.js
 * @version : 
 * @description : 
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    StatusBar,
    TouchableOpacity,
    ScrollView
} from 'react-native';

let { width, height } = Utils.size;
import Slider from '../common/slider'
import NetWorkImg from '../common/networkImg'
import AddPublicPhoto from './addPublicPhoto'

class PhotoPublic extends Component {

    constructor(props) {
        super(props);
        SceneObj.PhotoPublic = this;
        Share.regResponder('photo','PhotoPublic');
        let userObj = JSON.parse(Store.session_user_id);
        this.state = {
            slider : false,
            index : 0,
            arr: userObj.pictures,
            touchPoint: null,
        };
    }

    responseRender(type) {
        let userObj = JSON.parse(Store.session_user_id);
        this.setState({arr: userObj.pictures});
    }

    createPhotoJsx() {
        //console.log('createPhotoJsx',this.state.arr);
        let item = [],arr = this.state.arr;
        for (var i in arr) {
            let index = i;
            item.push(
                <TouchableOpacity  ref={'photo_'+index}  key = {i} onPress={()=>this.openPhoto(index)}  activeOpacity={1}>
                    <NetWorkImg
                        source={{uri:arr[i].picture}} 
                        style={styles.image}
                        loadSize={'small'}
                    />
                </TouchableOpacity>
            )
        }
        return (item);
    }

    render() {
        let slider = this.state.slider ? this.createSlider() : null;
        let photoItem = this.createPhotoJsx();
        return (
            <View style={styles.container}>
                <ScrollView>
                    <View style={styles.list}>
                        <TouchableOpacity  activeOpacity = {1} onPress={()=>this.gotoAddPhoto()}>
                            <Image style={styles.image} source={require('../img/photo_addicon.jpg')}/>
                        </TouchableOpacity> 
                        {photoItem}
                    </View>
                </ScrollView>
                {slider}
            </View>
        );
    }

    openPhoto(index) {
        this.refs["photo_"+index].measure((fx, fy, width, height, px, py) => {
            StatusBar.setHidden(true);
            this.setState({
                slider : true,
                index : parseInt(index),
                touchPoint : {
                    x: px,
                    y: py,
                    width: width,
                    height: height, 
                }
            });
        });1   
    }

    createSlider() {
        let jsx = <Slider ref='slider' touchPoint={this.state.touchPoint}  arr = {this.state.arr}  index = {this.state.index} callbackParent={this.sonCallback.bind(this)}/>
        return (jsx);
    }

    sonCallback() {
        this.setState({
            slider : false,
            index : 0,
        });     
    }

    gotoAddPhoto() {
        Utils.navJumpTo(this.props.navigator, { name: "Add Public Photo", component: AddPublicPhoto, title: 'Add Public Photo'},'left');
    }

}


const styles = StyleSheet.create({

      container: {
        flex:1,
        width:width,
        height:height-60,
        backgroundColor:'#fff',
      },

      list: {  
        width:width,
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
      },

      image : {
        width:(width-4*4)/4,
        height:(width-4*4)/4,
        margin:2,
      }
});

export default PhotoPublic;

